<template>
    <div id="monitor-analyse-charts" ></div>
</template>

<script>
  import echarts from '@/lib/echarts'

  export default {
    name: "ClassAnalysChart",
    data() {
      return {

      }
    },
    mounted() {
      this.getChartsData()
    },
    methods: {
      getChartsData() {
        var myChart = echarts.init(document.getElementById('monitor-analyse-charts'));
        var option = {
          color: "#c346c2",
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "line",
              lineStyle: {
                type: "dotted",
                opacity: 0.6
              }
            },
            padding: [4, 10],
            backgroundColor: "rgba(255 ,255 ,255 ,1)",
            borderColor: "#eee",
            borderWidth: "1",
            textStyle: {
              color: "#666"
            },
            extraCssText: "box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);",
          },
          grid: {
            left: "4%",
            right: "4%",
            top: "12%",
            bottom: "10%",
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#2479ff",
                lineHeight: 26
              }
            },
            // 刻度
            axisTick: {
              show: true,
              length: 4,
              lineStyle: {
                width: 1,
                type: "solid"
              }
            },
            // 轴线的颜色以及宽度
            axisLine: {
              show: true,
              lineStyle: {
                color: "#2479ff",
                width: 1,
                type: "solid"
              }
            },
            data: ['生物课', '化学课', '历史课', '英语课', '数学课', '物理课']
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: "#2479ff",
                lineHeight: 26
              }
            },
            // 刻度
            axisTick: {
              show: true,
              length: 4,
              lineStyle: {
                width: 1,
                type: "solid"
              }
            },
            // 轴线的颜色以及宽度
            axisLine: {
              show: true,
              lineStyle: {
                color: "#2479ff",
                width: 1,
                type: "solid"
              }
            },
            // 分隔线样式设置
            splitLine: {
              show: true,
              lineStyle: {
                color: '#e0e0e0',
                type: "dashed"
              }
            },
            max: 100
          },
          series: [{
            type: 'line',
            smooth: true,
            // 设置拆线渐变色
            areaStyle: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,	    // 0,0,1,0表示从左向右    0,0,0,1表示从右向左   0, 1, 0, 0从下向上
                [{
                  offset: 0,
                  color: 'rgba(163, 86, 235, 0.3)'
                }, {
                  offset: 1,
                  color: 'rgba(163, 86, 235, 0.01)'
                }])
            },
            // 设置折线线条颜色
            itemStyle : {
              normal : {
                lineStyle:{
                  color:'#c346c2'
                }
              }
            },
            data: [30, 50, 99, 80, 70, 60, 65]
          }]
        };

        myChart.setOption(option);
      }
    }
  }
</script>

<style scoped>
#monitor-analyse-charts{
  width: 100%;
  height: 100%;
}
</style>
